<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
    ad_shouqian:'',
    ios_shouquan:'',
    meibai:'9',
    mopi:'9',
    hongrun:'3',
    meimao:'10',
    renyan:'10',
    yanju:'10',
    yanjiao:'10',
    kaiyanjiao:'10',
    shoulian:'10',
    xiaolian:'10',
    zuixing:'10',
    shoubi:'10',
    xiaba:'10',
    etou:'10',
    changbi:'10',

})


</script>
<template>
    <el-form :model="form" label-width="auto" style="max-width: 700px">
        <el-form-item label="萌颜授权码-Andriod：" size="2px">
            <el-input v-model="form.ad_shouqian" placeholder="" />
            <h3>留空表示默认美颜</h3>
        </el-form-item>
        <el-form-item label="萌颜授权码-IOS" size="2px">
            <el-input v-model="form.ios_shouquan" placeholder="" />
        </el-form-item>
        <div class="a">
            <h3>美颜</h3>
            <el-form-item label="美白：" size="2px">
                <el-input v-model="form.meibai" placeholder="" />

            </el-form-item>
        </div>
        <el-form-item label="磨皮：" size="2px">
            <el-input v-model="form.mopi" placeholder="" />

        </el-form-item>
        <el-form-item label="红润：" size="2px">
            <el-input v-model="form.hongrun" placeholder="" />
            <h3>0-9为整数-1为不设置</h3>
        </el-form-item>
        <div class="b">
            <h3>磨皮默认值</h3>
            <el-form-item label="眉毛：" size="2px">
                <el-input v-model="form.meimao" placeholder="" />
            </el-form-item>
        </div>
        <el-form-item label="人眼：" size="2px">
            <el-input v-model="form.renyan" placeholder="" />
        </el-form-item>
        <el-form-item label="眼距：" size="2px">
            <el-input v-model="form.yanju" placeholder="" />
        </el-form-item>
        <el-form-item label="眼角：" size="2px">
            <el-input v-model="form.yanjiao" placeholder="" />
        </el-form-item>
        <el-form-item label="开眼角：" size="2px">
            <el-input v-model="form.kaiyanjiao" placeholder="" />
        </el-form-item>
        <el-form-item label="瘦脸：" size="2px">
            <el-input v-model="form.shoulian" placeholder="" />
        </el-form-item>
        <el-form-item label="削脸：" size="2px">
            <el-input v-model="form.xiaolian" placeholder="" />
        </el-form-item>
        <el-form-item label="嘴形：" size="2px">
            <el-input v-model="form.zuixing" placeholder="" />
        </el-form-item>
        <el-form-item label="瘦鼻：" size="2px">
            <el-input v-model="form.shoubi" placeholder="" />
        </el-form-item>
        <el-form-item label="下巴：" size="2px">
            <el-input v-model="form.xiaba" placeholder="" />
        </el-form-item>
        <el-form-item label="额头：" size="2px">
            <el-input v-model="form.etou" placeholder="" />
        </el-form-item>
        <el-form-item label="长鼻：" size="2px">
            <el-input v-model="form.changbi" placeholder="" />
            <h3>0-100为整数-1为不设置</h3>
        </el-form-item>

        <el-button type="info" plain>保存</el-button>


    </el-form>
</template>
<style scoped>
.el-form-item h3 {
    color: #999;
    font-size: 14px;
}

.el-button {
    margin-left: 153px;
    color: #123;
}

.a {
    display: flex;
}

.a h3 {
    font-size: 14px;
    margin-top: 6px;
    margin-right: -28px;
}

.b {
    display: flex;
}

.b h3 {
    font-size: 14px;
    margin-top: 6px;
    margin-right: -70px;
}
</style>
